<form [formGroup]="form">
  <ix-select
    formControlName="country"
    [label]="'Country' | translate"
    [required]="true"
    [options]="countries$"
    [tooltip]="helptext.add.country.tooltip | translate"
  ></ix-select>

  <ix-input
    formControlName="state"
    [label]="'State' | translate"
    [required]="true"
    [tooltip]="helptext.add.state.tooltip | translate"
  ></ix-input>

  <ix-input
    formControlName="city"
    [label]="'Locality' | translate"
    [required]="true"
    [tooltip]="helptext.add.city.tooltip | translate"
  ></ix-input>

  <ix-input
    formControlName="organization"
    [label]="'Organization' | translate"
    [required]="true"
    [tooltip]="helptext.add.organization.tooltip | translate"
  ></ix-input>

  <ix-input
    formControlName="organizational_unit"
    [label]="'Organizational Unit' | translate"
    [tooltip]="helptext.add.organizationalUnit.tooltip | translate"
  ></ix-input>

  <ix-input
    formControlName="email"
    [label]="'Email' | translate"
    [required]="true"
    [tooltip]="helptext.add.email.tooltip | translate"
  ></ix-input>

  <ix-input
    formControlName="common"
    [label]="'Common Name' | translate"
    [tooltip]="helptext.add.common.tooltip | translate"
  ></ix-input>

  <ix-chips
    formControlName="san"
    [label]="'Subject Alternative Name' | translate"
    [required]="true"
    [tooltip]="helptext.add.san.tooltip | translate"
  ></ix-chips>

  <ix-form-actions>
    <button
      mat-button
      matStepperPrevious
      ixTest="back"
    >{{ 'Back' | translate }}</button>
    <button
      mat-button
      matStepperNext
      color="primary"
      ixTest="next"
      [disabled]="form.invalid"
    >{{ 'Next' | translate }}</button>
  </ix-form-actions>
</form>
